<template>
	<div id="app">
		<div
			class="top-login"
			:style="{ height: statusBarHeight, background: headColor, display: headBlock }"
		></div>
		<div id="content" :style="{ top: contentTop, height: contentHeight }">
			<keep-alive exclude="home">
				<transition :name="transitionName">
					<router-view />
				</transition>
			</keep-alive>
			<commonTabBar
				v-if="isTab"
				class="tabBar"
				:placeholder="placeholder"
				:tabBarList="tabBarList"
			></commonTabBar>
		</div>
		
	</div>
</template>

<script>
export default {
	components: {  },
	data() {
		return {
			statusBarHeight: 0,
			headBlock: 'block',
			contentTop: '0px',
			contentHeight: 'calc(100vh - 0px)',
			headColor: '#3d7efe',
			top: false,
			placeholder: true,
			transitionName: 'slide-left',
			isTab: false,
			tabBarList: [
				{
					text: '首页',
					path: '/home',
					active: require('./assets/img-common/shouye-active.png'),
					inactive: require('./assets/img-common/shouye.png')
				},
				{
					text: '我的',
					path: '/my',
					active: require('./assets/img-common/wode-active.png'),
					inactive: require('./assets/img-common/wode.png')
				}
			]
		}
	},
	watch: {
		$route(to, from) {
			if (window.plus) {
				if (to.fullPath == '/' || to.fullPath == '/home' || to.fullPath == '/my') {
					plus.navigator.setStatusBarBackground('#6495ED')
					plus.navigator.setStatusBarStyle('light')
				} else {
					plus.navigator.setStatusBarBackground('#6495ED')
					plus.navigator.setStatusBarStyle('dark')
				}
			}

			if (to.path === '/my' || to.path === '/home') {
				this.isTab = true
			} else {
				this.isTab = false
			}
			if (
				to.path == '/login' ||
				to.path == '/my' ||
				to.path == '/' ||
				to.path == '/home' 
			) {
				this.contentTop = '0px'
				this.contentHeight = '100%'
				this.headBlock = 'none'
			} else {
				this.$nextTick(() => {
					this.contentTop = this.statusBarHeight
					this.contentHeight = `calc(100vh - ${this.statusBarHeight})`
				})
				this.headBlock = 'block'
			}
			if (to.path == '/home') {
				this.headColor = '#fff'
			} else {
				this.headColor = '#fff'
			}

			// const toDepth = to.meta.depth
			// const fromDepth = from.meta.depth
			this.transitionName = to.path == '/home' || to.path == '/my' ? '' : 'slide-left'
		}
	},
	activated() {},
	deactivated() {},
	created() {
		setTimeout(() => {
			this.statusBarHeight = localStorage.getItem('statusbarHeight') + 'px'
		}, 1000)
	},
	mounted() {},
	methods: {
		
	}
}
</script>

<style lang="less">
.top-login {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

#content {
	width: 100%;
	position: relative;
	left: 0;
	// overflow: auto;
	background-color: #f8f8f8;
}

// font-size: 标准字体大小统一为34px
#app {
	position: absolute;
	width: 100vw;
	// height:calc(100vh - 134px) ;
	// overflow: auto;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #fff;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/deep/ .van-loading__spinner {
	top: 50% !important;
}
.customLoading {
	z-index: 99;
	position: absolute !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>
